<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<!-- eslint-disable vuejs-accessibility/form-control-has-label -->
<template>
  <div class="header-box">
    <div class="common">
        <img class="logo" src="../assets/logo.jpg" alt="">
        <ul class="nav-left">
            <li>首页</li>
            <li>分类</li>
            <li>排行榜</li>
            <li>世界</li>
            <li>原创投稿</li>
            <li>APP下载</li>
            <li>IP合作</li>
            <li>营销合作</li>
            <li class="hot">条漫大赛</li>
        </ul>
        <div class="header-search">
            <input type="text" class="search" placeholder="搜索作品、作者名" v-model="search">
            <i class="icon-search"></i>
        </div>
        <div class="user">
            <span :class="{active:$route.path === '/login'}"
            @click="$router.push('/login')">登录</span> |
            <span :class="{active:$route.path === '/register'}"
            @click="$router.push('/register')">注册</span>
        </div>
        <ul class="nav-right">
            <li>我要投稿</li>
            <li>开放平台</li>
            <li>充值</li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
    };
  },
};
</script>

<style scoped lang="less">

.header-box {
    display: flex;
    align-items: center;
    height: 64px;
    color: #fff;
    background-color: #202020;
    .common {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #d2d2d2;
        .nav-left {
            display: flex;
            align-items: center;
            padding-left: 35px;
            li {
                padding-left: 10px;
                padding-right: 10px;
                &.hot {
                    position: relative;
                }
                &.hot::before {
                    position: absolute;
                    top:-7px;
                    right: -12px;
                    content: '';
                    width: 28px;
                    height: 13px;
                    background-image: url('../assets/hot.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
        }
        // 搜索框
        .header-search {
            margin-left: 15px;
            position: relative;
            input {
                padding-left: 15px;
                width: 202px;
                height: 32px;
                border: 0;
                outline: none;
                border-radius: 32px;
            }
            .icon-search {
                position: absolute;
                right: 10px;
                width: 30px;
                height: 30px;
                background-image: url('../assets/search.png');
                background-repeat: no-repeat;
            }
        }

        .user{
            margin-left: 20px;
            .active {
                font-weight: bold;
                color: #16d2ec !important;
            }
        }

        .nav-right {
            margin-left: 5px;
            display: flex;
            align-items: center;
            li {
                padding-left: 10px;
                padding-right: 10px;
            }
        }
    }
    .logo {
        width: 60px;
        height: 30px;
    }
}
</style>
